<!DOCTYPE html>

% # variables:
% # bookshelf, sidebar

% import lonote.translate
% g = lonote.translate.get_gettext_func()

<html lang="">
    <head>
        <meta charset="utf-8" />
        <title>{{!g('LoNote Configure')}}</title>
        <meta name="description" content="Configure LoNote" />

        <script src="/static/js/jquery-1.9.1.js"></script>
        <script src="/static/js/jquery-ui-1.10.2.custom.min.js"></script>
        <script src="/static/js/URI.js"></script>
        <script src="/static/js/shortcut.js"></script>
        <script src="/static/js/strftime.js"></script>
        <script src="/static/js/lonote.js"></script>

        <link rel="stylesheet" href="/static/css/jqueryui-default/jquery-ui-1.10.2.custom.min.css" />
        <link rel="stylesheet" href="/static/css/default.css" type="text/css" />
        <link rel="stylesheet" href="/static/css/config.css" type="text/css" />

        <script>
        function setCookie(c_name,value,expiredays) {
            var exdate=new Date()
            exdate.setDate(exdate.getDate()+expiredays)
            document.cookie=c_name+ "=" +escape(value)+
            ((expiredays==null) ? "" : ";expires="+exdate.toGMTString())
        }
        function getCookie(c_name) {
            if (document.cookie.length>0) {
                c_start=document.cookie.indexOf(c_name + "=")
                if (c_start!=-1) { 
                    c_start=c_start + c_name.length+1 
                    c_end=document.cookie.indexOf(";",c_start)
                    if (c_end==-1) c_end=document.cookie.length
                    return unescape(document.cookie.substring(c_start,c_end))
                } 
            }
            return ""
        }
        </script>

    </head>

    <body>
        <div id="content_column">
            <header>
                <h1>{{!g('Management of LoNote Server')}}</h1>
            </header>
            <article id="config_content">
                <img src="/static/lo/lo_1_smile_1.png" style="float: left;" />
                <p><br/></p>
                <p>{{!g('Hello!')}}</p>
                <p>{{!g('You can manage whole LoNote Server in this page. Include Load a notebook, create a notebook, shutdown server, configure some editing ability. etc.')}}</p>
                <p style="clear: both;"><br/></p>

                <h2>{{!g('Notebooks Management')}}</h2>
                <form method="POST" action="?cmd=reload">
                    % load_status = bookshelf.load_status()
                    <ol id="notebooks">
                    % for fname, loaded, buuid in load_status:
                        % if loaded:
                            <li class="ui-state-default"><input name="loadbook" checked="true" value="{{fname}}" type="checkbox" /><input name="order" type="hidden" value="{{fname}}" /><a href="/config/book/{{buuid}}">{{fname.rsplit('.', 1)[0]}}</a></li>
                        % else:
                            <li class="ui-state-default"><input name="loadbook" value="{{fname}}" type="checkbox" /><input name="order" type="hidden" value="{{fname}}" />{{fname.rsplit('.', 1)[0]}}</li>
                        % end
                    % end
                    </ol>
                    <script>
                        $( "#notebooks" ).sortable({placeholder: "ui-state-highlight"}).disableSelection();
                    </script>

                    % value_text = g('Reload')
                    % if len(load_status) == 0:
                        <p class="description"><b>{{!g('Nothing can be loaded yet...')}}</b><br/><small> {{!g('Please create a new book first!')}}</small></p>
                        <input value="{{value_text}}" type="submit" disabled="disabled" />
                    % else:
                        <input value="{{value_text}}" type="submit" />
                    % end
                </form>
                <p class="description">{{!g('Select the books you want to use, then click <b>Reload Button</b>.')}}</p>
                <p>&nbsp;</p>


                <h3>{{!g('A New Notebook')}}</h3>
                <p class="description">{{!g('Create a fully new notebook.')}}</p>
                <form method="POST" action="?cmd=createbook">
                    % title_text = g('Must a valid filename!')
                    % ph_text = g('Input New book name')
                    <input class="ui-state-highlight" name="fname" placeholder="{{ph_text}}" type="text" pattern='[^/\\:*?"<>|]{1,240}' title="{{title_text}}" required="required" />
                    % value_text = g('Add Book')
                    <input value="{{value_text}}" type="submit" />
                </form>
                <p><br/></p>

                <h3>{{!g('Upload a Notebook')}}</h3>
                <p class="description">{{!g('Upload a "lobook" you have.')}}</p>
                <!-- <p class="description">If the file not be accepted, just nothing happen.</p> -->
                <form method="POST" enctype="multipart/form-data" action="?cmd=uploadbook">
                    <input class="ui-state-highlight" name="uploadfile" required="required" type="file" />
                    % value_text = g('Upload a Book')
                    <input value="{{value_text}}" type="submit" />
                </form>
                <p><br/></p>

                <h2>{{!g('Browser Management')}}</h2>
                <p class="description">{{!g('Delete all your browser side data.')}}</p><p class="description">{{!g('It will reset all <b>"page scroll"</b>, <b>"caret position"</b>, <b>"embedded resource format your used before"</b>, <b>"last page"</b>. etc.')}}</p>
                % confirm_text = g('Really delete all browser side data?')
                % value_text = g('Clear Browser Side Data')
                <input type="submit" value="{{value_text}}" onclick="var ans = confirm('{{confirm_text}}');if(ans){localStorage.clear();deleteAllCookies();location.reload();}"/>
                <script>
                    function deleteAllCookies() {
                        var cookies = document.cookie.split(";");

                        for (var i = 0; i < cookies.length; i++) {
                            var cookie = cookies[i];
                            var eqPos = cookie.indexOf("=");
                            var name = eqPos > -1 ? cookie.substr(0, eqPos) : cookie;
                            document.cookie = name + "=;expires=Thu, 01 Jan 1970 00:00:00 GMT";
                        }
                    }
                </script>
                <p><br/></p>

                <h3>{{!g('Sidebar Configure')}}</h3>
                <p class="description">{{!g('A big "nav maximum level" setting will consume a lot of performance. So make it as small as possible.')}}</p>
                % title_text = g('The depth of the EZ navigation menu.')
                % title_text2 = g('must a positive integer or 0 or -1, recommend: 2')
                <p><label for="eznav_level" title="{{title_text}}">{{!g('Ez-nav level: ')}}</label><input class="ui-state-highlight" id="eznav_level" type="number" min="-1" max="100" step="1" onload="" onchange="setCookie('eznav_level', this.value, 365);" title="{{title_text2}}" /></p>
                % title_text = g('The depth of the STANDARD navigation menu.')
                % title_text2 = g('must a positive integer or 0 or -1, recommend: 0')
                <p><label for="stnav_level" title="{{title_text}}">{{!g('St-nav level: ')}}</label><input class="ui-state-highlight" id="stnav_level" type="number" min="-1" max="100" step="1" onload="" onchange="setCookie('stnav_level', this.value, 365);" title="{{title_text2}}" /></p>
                <script>
                    $(window).on('load', function(){
                        var eznav_level = getCookie('eznav_level');
                        $('#eznav_level').val(eznav_level);
                        var stnav_level = getCookie('stnav_level');
                        $('#stnav_level').val(stnav_level);
                    });
                </script>
                <p><br/></p>

                <h3>{{!g('Editing')}}</h3>
                <p class="description">{{!g('About content editing...')}}</p>
                % title_text = g('This is the date-stamp format which your can insert to your note content, ex: %Y-%m-%d')
                <p><label for="date_insert_format">{{!g('Date-stamp ')}}<a href="http://hacks.bluesmoon.info/strftime/demo.html" target="_blank">{{!g('format')}}</a>: </label><input class="ui-state-highlight" id="date_insert_format" title="{{title_text}}" placeholder="ex: %Y-%m-%d" onkeyup="localStorage['date_insert_format'] = this.value;"/><br><span id="date_insert_format_preview" style="opacity: 0.5;"></span></p>
                % title_text = g('This is the time-stamp format which your can insert to your note content, ex: %H:%M:%S')
                <p><label for="time_insert_format">{{!g('Time-stamp ')}}<a href="http://hacks.bluesmoon.info/strftime/demo.html" target="_blank">{{!g('format')}}</a>: </label><input class="ui-state-highlight" id="time_insert_format" title="{{title_text}}" placeholder="ex: %H:%M:%S" onkeyup="localStorage['time_insert_format'] = this.value;"/><br><span id="time_insert_format_preview" style="opacity: 0.5;"></span></p>
                <script>
                    function tif_preview(){
                        var d = new Date();
                        var s = d.strftime($('#time_insert_format').val());
                        $('#time_insert_format_preview').text(s);
                    };

                    function dif_preview(){
                        var d = new Date();
                        var s = d.strftime($('#date_insert_format').val());
                        $('#date_insert_format_preview').text(s);
                    };

                    $(window).on('load', function(){
                        var tif = lo.get.time_insert_format();
                        $('#time_insert_format')
                            .on('input', tif_preview)
                            .val(tif);
                        tif_preview();

                        var dif = lo.get.date_insert_format();
                        $('#date_insert_format')
                            .on('input', dif_preview)
                            .val(dif);
                        dif_preview();
                    });
                </script>
                <p><br/></p>

                <h3>{{!g('History Recording')}}</h3>
                <p class="description">{{!g('Configure Lonote\'s history recording system.')}}</p>
                % title_text = g('When a page long term have no be changed, auto make a record for backup the old version. (0 for Disable this function)')
                <p><label for="rc_days">{{!g('Auto record for longterm no changed (days): ')}}</label><input class="ui-state-highlight" id="rc_days" type="number" min="0" step="1" title="{{title_text}}" placeholder="ex: 30" onchange="setCookie('rc_longterm_nochanged', this.value, 365);"/></p>
                <script>
                    $(window).on('load', function(){
                        var rc_days = getCookie('rc_longterm_nochanged');
                        $('#rc_days').val(rc_days);
                    });
                </script>
                <p><br/></p>


                <h2>{{!g('Shutdown Server')}}</h2>
                <p class="description">{{!g('Be careful! You can <b>NOT</b> reopen server by browser.')}}</p>
                <form method="POST" action="?cmd=shutdown">
                    % confirm_text = g('Are you sure you want to Shutdown this LoNote server?')
                    % value_text = g('Shutdown')
                    <input value="{{value_text}}" type="submit" onclick="return confirm('{{confirm_text}}');" />
                </form>
                <p><br/></p>


            </article>

        </div>
        
        <script>
            $(window).on('load', function(){
                lo.scr.restore();
                lo.key.search_ready();
            });
            $(window).on('beforeunload', lo.scr.save);
            $(window).blur(lo.scr.save);
            // $(window).on('load', function() {
            //     $(document).tooltip();
            // });
            $('#config_content').tooltip();
        </script>

        <!-- 讀入 sidebar -->
        {{!sidebar}}
        <!--
        <script>
            function sidebar_load(){
                function get_success(data){
                    $('body').append(data);
                };
                var sidebar_loc = '/sidebar';
                $.get(sidebar_loc, get_success);
            };
            $(window).one('load', sidebar_load);
        </script>
        -->

        <script>
            shortcut.add("F4",function(){
                location.assign('/last');
            });
        </script>

    </body>
</html>

